<template>
    <Card class="library">
        <div class="ivu-mb-16 drafts" >
            <Row type="flex" class="headrow">
                <Col>
                <Select   placeholder="请选择公众号" v-model="params.wechatId" @on-change="changeWechat" clearable class="cur" v-width="280">
                    <Option v-for="item in wechatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Input  class="ivu-ml-16" v-width="280"  suffix="ios-search" clearable v-model='params.keyword' placeholder='请输入标题/作者' />
                </Col>
                <Col>
                <Button @click="changeadddraftbox">新建图文消息</Button>
                </Col>
            </Row>
        </div>
        <div>
            <Scroll   :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
                <Row>
                    <Col>
                    <div  class="card" v-width="250"  v-for="(item,index) in cardList" :key="index">

                        <div class="cardhead">
                            <Row style=" justify-content:space-between;">
                                <Col>{{item.created_at}}</Col>
                                <Col>钉钉</Col>
                            </Row>
                        </div>
                        <template v-for="(it,inx) in item.children" >
                            <div style=" padding: 10px;" :key="inx">
                                <div class="imageurl" @mouseenter="imageenter" @mouseleave="imageleaver">
                                    <img :src="it.wechat_url" alt=""  class="canvasImg">
                                    <a href="https://www.baidu.com/" target="_blank"><div class="imagemodal" v-show="showimage"><div class="modalfont">本地预览</div></div></a>
                                </div>
                            </div>
                            <div>
                                <ButtonGroup>
                                    <Tooltip placement="top" transfer>
                                        <Button v-width="82.5" class="cardbth bthleft"><Icon type="md-aperture" @click="changepublish(it)" /></Button>
                                        <template #content>
                                            <p>发表，点击发表到公众号</p>
                                        </template>
                                    </Tooltip>
                                    <Tooltip placement="top" transfer>
                                        <Button v-width="82.5"  class="cardbth"><Icon type="md-create" /></Button>
                                        <template #content>
                                            <p>编辑，点击跳转到新的标签页进行编辑</p>
                                        </template>
                                    </Tooltip>
                                    <Tooltip placement="top" transfer>
                                        <Button v-width="82.5" @click="changedelete(it)"  class="cardbth bthright"><Icon type="ios-trash" /></Button>
                                        <template #content>
                                            <p>删除，点击触发真删除</p>
                                        </template>
                                    </Tooltip>
                                </ButtonGroup>
                            </div>
                        </template>
                    </div>
                    </Col>
                </Row>
            </Scroll>
        </div>
    </Card>
</template>
<script>
    import { wechatselectConfig, draftarticleList, draftarticleInfo, wechatpushArticle, wechatdeldraftArticle } from '@api/public'
    import template from '../../components/search/template.vue'
    export default {
        components: { template },
        data () {
            return {
                params: { wechatId: '', page: 1, pageSize: 24, keyword: '' },
                wechatList: [],
                height: null,
                total: 0,
                data: [
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // },
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // },
                    // {
                    //     path: 'http://sckimg1-test.ahjgyl.com/newImgs/img/d196a23554b749aaa85064290b653991.png'
                    // }

                ],
                cardList: [],
                showimage: false
            }
        },
        mounted () {
            this.getwechat()
        },
        methods: {
            // 新建图文
            changeadddraftbox () {
                this.$router.push({ name: 'newdraftbox' })
            },
            getwechat () {
                wechatselectConfig().then(res => {
                    this.wechatList = res
                })
            },
            // 切换公众号
            changeWechat () {
                this.getimgList()
            },
            // 获取图片列表
            getimgList () {
                draftarticleList(this.params).then(res => {
                    this.cardList = res.list
                })
            },
            imageenter () {
                this.showimage = true
            },
            imageleaver () {
                this.showimage = false
            },
            handleReachBottom () {
                //
            },
            // 发表
            changepublish (it) {
                wechatpushArticle({ id: it.id }).then(res => {
                    this.$Message.success('发表成功')
                }).catch(() => {
                    this.$Message.error('发表未成功')
                })
            },
            // 删除
            changedelete (item) {
                this.$Modal.confirm({
                    title: '确定删除当前文章吗？',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        wechatdeldraftArticle({ id: item.id }).then(res => {
                            this.$Message.info('删除成功');
                            this.getimgList()
                        }).catch(() => {
                            this.$Message.error('删除失败')
                        })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            }
        }
    }
</script>
<style >
@import "../../styles/mystyle.less";
.drafts{
    padding-bottom: 15px;
}
.headrow{
    justify-content: space-between;
}
.cur{
    width: 400px;
    position: relative;
}
.cur .ivu-select-selected-value{
    padding-left: 100px !important;
}
.cur .ivu-select-selected-value::before{
    content: '当前公众号:';
    position: absolute;
    z-index: 9;
    top:0;
    left: 10px;
}
.imageurl{
    width: 100%;
    /* height: 250px; */
    height: auto;
    position: relative;

}
.imagemodal{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.8;
    top:0;
    left: 0;
    background: #3d3d41;
    font-size: 16px;
}
.modalfont{
    padding: 83% 30%;
    color: #fff;
}
.canvasImg{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
/* .card{
    border: 1px solid #dcdee2;
    box-shadow: 0 1px 6px #dcdee2;
} */
.cardhead{
    margin: 0 10px ;
    padding: 10px 0;
    /* border-bottom: 1px solid #dcdee2; */
}
.cardbth{
    border-bottom: none;
    border-left:none;
    border-radius: inherit;
    font-size: 18px;
}
.bthleft{
    border-left:none
}
.bthright{
    border-right: none;
}

</style>
